﻿@model NFine.Domain._02_ViewModel.View_Messages
@{
    ViewBag.Title = "信息模块--查看留言";
    Layout = "~/Views/Shared/_Form.cshtml";
}

<form id="form1" novalidate="novalidate" style="padding: 0 15px;">
    <div class="page-header">
        <h3>
            @Model.F_Title
        </h3>
        <h3>
            <small>@Model.F_Contact</small>
        </h3>
    </div>
    <div class="content">
        <div style="margin-top: 10px; padding: 5px;">
            <div style="color: #253340; margin-bottom: 10px;">
                <span style="display: inline-block; margin-right: 20px;">@Model.F_CreatorTime.Value.ToString("yyyy-MM-dd HH:mm:ss")</span>
                <span style="display: inline-block;">
                    @Model.F_CreatorUserName
                </span>
            </div>
            <div>
                @Model.F_Content
            </div>
        </div>
        <div style="border-top: 1px solid #CCC; margin: 20px 0px;"></div>
    </div>
    <div class="content" id="replys">
        @*<div style="margin-top: 10px; padding: 5px;">
            <div style="color: #253340; margin-bottom: 10px;">
                <span style="display: inline-block; margin-right: 20px;">2018/1/1 10:45:13</span>
                <span style="display: inline-block;">
                    客服（System）
                </span>
            </div>
            <div>
                请等待系统处理
            </div>
        </div>
        <div style="border-top: 1px solid #CCC; margin: 20px 0px;"></div>
        <div style="margin-top: 10px; padding: 5px;">
            <div style="color: #253340; margin-bottom: 10px;">
                <span style="display: inline-block; margin-right: 20px;">2018/1/1 10:51:30</span>
                <span style="display: inline-block;">
                    客服（System）
                </span>
            </div>
            <div>
                请稍等
            </div>
        </div>
        <div style="border-top: 1px solid #CCC; margin: 20px 0px;"></div>*@
    </div>
    <div class="form-group">
        <textarea class="form-control required" cols="20" placeholder="请输入回复内容" id="F_Content" name="F_Content" rows="5"></textarea>
    </div>
    <div class="form-group">
        <input id="F_MessageId" type="hidden" value="@Model.F_Id"/>
        <button class="btn-primary btn" id="btnSubmit" style="margin-top: 20px;"><span class="glyphicon glyphicon-floppy-disk"></span>提交</button>
    </div>
</form>
<script src="~/Content/js/juicer/juicer-min.js"></script>
<script type="text/javascript">
    juicer.set({
        'strip': false,
        'cache': false
    });
    $(function() {
        renderData();
        $('#btnSubmit').on('click', function () {
            var $that = $(this);
            $that.attr('disabled', true);
            $.ajax({
                url: '/InformationCenter/Messages/DoReply',
                type: 'post',
                dataType: 'json',
                data: $("#form1").formSerialize(),
                beforeSend: function () {
                    $that.html('正在提交回复...');
                },
                success: function (json) {
                    $('#F_Content').val('');
                    $that.html('回复');
                    $that.removeAttr('disabled');
                    if (json.state == 'success') {
                        $.modalAlert(json.message, 'success');
                        renderData();
                    } else {
                        $.modalAlert(json.message, 'error');
                    }
                },
                error: function () {
                    $.modalAlert('服务器发生错误，提交失败', 'error');
                    $('#F_Content').val('');
                    $that.html('回复');
                    $that.removeAttr('disabled');
                }
            });
        });
        setTimeout(function () {
            // 刷新列表，重新显示未读留言
            $.currentWindow().$("#gridList").trigger("reloadGrid");
            $.currentWindow().$(".toolbar .operate").find('.close').click();
        }, 200);
    });

    function renderData() {
        var $reply = $('#replys');
        var tpl = $("#tpl").html();
        var compiledTpl = juicer(tpl);
        $.ajax({
            url: '/InformationCenter/Messages/ReplyList',
            type: 'post',
            dataType: 'json',
            data: { messageId: '@Model.F_Id' },
            beforeSend: function() {
                $reply.html('正在加载回复....');
            },
            success: function (json) {
                console.log(JSON.stringify(json));
                var jsonStr = '{"reply":' + json.message + "}";
                var data = JSON.parse(jsonStr);
                var html = compiledTpl.render(data);
                $reply.html(html);
            },
            error: function () {
                $reply.html('');
            }
        });
    }
</script>
<script id="tpl" type="text/template">
        {@@each reply as it,index}
        <div style="margin-top: 10px; padding: 5px;">
            <div style="color: #253340; margin-bottom: 10px;">
                <span style="display: inline-block; margin-right: 20px;">${it.F_CreatorTime}</span>
                <span style="display: inline-block;">
                    {@@if it.IsAdmin} 系统 {@@/if} （${it.F_CreatorUserName}）
                </span>
            </div>
            <div>
                ${it.F_Content}
            </div>
        </div>
        <div style="border-top: 1px solid #CCC; margin: 20px 0px;"></div>
        {@@/each}
</script>